<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="894px"
      title="详情"
      wrapClassName="user-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <div class="title">级配曲线</div>
        <div ref="line-chart" class="line-chart-body"></div>
        <div class="table-wrap">
          <div class="title">筛孔通过百分比</div>
          <vxe-table
            height="99%"
            class="scrollbarStyle"
            align="center"
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column
              :field="v.key"
              :width="i == 0 ? 170 : 100"
              :title="v.name"
              v-for="(v, i) in columns"
              :key="i"
            ></vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import ChartView from "@/components/ChartView";
import { deepMerge } from "@/utils";
import { detailGCJC } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["visible", "id"],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  components: {
    ChartView,
  },
  data() {
    return {
      jpqxOpt: {
        xAxis: {},
      },
      tableData: [],
      columns: [],
      width: "0px",
    };
  },
  methods: {
    getDetail() {
      detailGCJC(this.id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.columns = result.headerList || [];
          this.tableData = result.tableList || [];
          let legend = [
            "允许波动上限/允许波动下限",
            "标准级配",
            "实际级配",
            "预警上限/预警下限",
          ];
          let seriesData = [
            //标准级配
            {
              color: this.$themeVaribles["--echart-green"],
              name: "标准级配",
              data: result.bzGradationList,
              type: "line",
            },
            //实际级配
            {
              color: this.$themeVaribles["--echart-blue"],
              name: "实际级配",
              data: result.sjGradationList,
              type: "line",
            },
            //预警上限
            {
              color: this.$themeVaribles["--echart-pink"],
              name: "预警上限/预警下限",
              title: "预警上限",
              data: result.upGradationList,
              type: "line",
              lineStyle: {
                type: "dashed",
              },
            },
            //预警下限
            {
              color: this.$themeVaribles["--echart-pink"],
              name: "预警上限/预警下限",
              title: "预警下限",
              data: result.downGradationList,
              type: "line",
              lineStyle: {
                type: "dashed",
              },
            },
          ];
          this.initLineChar({ legend, seriesData });
        })
        .catch((_) => {});
    },
    initLineChar(opt = {}) {
      let xdata = [];
      this.columns.forEach((v, i) => {
        if (i != 0) {
          xdata.push(v.name);
        }
      });
      let { legend, seriesData } = opt;
      let chart_dom = this.$refs["line-chart"];
      let chartInstance = this.$echarts.init(chart_dom);
      let baseOptions = {
        legend: {
          data: legend,
          top: 0,
          right: 0,
        },
        tooltip: {
          formatter: (params) => {
            let str = "";
            seriesData.forEach((v) => {
              let item = v.data[params.dataIndex];
              str += `${v.name}:${item}<br/>`;
            });
            return str;
          },
        },
        grid: {
          top: "30px",
          left: "30px",
          right: "30px",
          bottom: "20px",
        },
        xAxis: {
          type: "category",
          data: xdata,
          axisLine: {
            onZero: false,
          },
        },
        yAxis: {
          type: "value",
        },
        series: seriesData,
      };
      chartInstance.setOption(deepMerge(this.lineChartsOptions, baseOptions));
      //开启响应式
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
    },
    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.user-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .ant-modal-header {
    border-top: 5px solid var(--primary-color) !important;
  }
  .curve-modal-body {
    padding: 20px;
    padding-top: 0;
    max-height: 700px;
    .custom-scrollbar();
    .title {
      .flex();
      align-items: center;
      height: 18px;
      font-size: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 15px;
      margin: 30px 0 20px 0;
    }
    .line-chart-body {
      height: 300px;
      width: 100%;
    }
    .table-wrap {
      height: 220px;
    }
  }
}
</style>
